import PropTypes from "prop-types";
import axios from "axios";
const Main = (props) => {
  // 改状态
  const updateDone = async (e, id) => {
    await axios.patch(`http://localhost:5000/todos/${id}`, {
      done: e.target.checked,
    });
    props.getTodoList();
  };

  // 删除
  const del = async (id) => {
    await axios.delete(`http://localhost:5000/todos/${id}`)
    props.getTodoList();
  }

  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {props.list.map((item) => (
          <li className={item.done ? "completed" : ""} key={item.id}>
            <div className="view">
              <input
                className="toggle"
                type="checkbox"
                checked={item.done}
                onChange={(e) => updateDone(e, item.id)}
              />
              <label>{item.name}</label>
              <button className="destroy" onClick={() => del(item.id)}></button>
            </div>
            <input className="edit" />
          </li>
        ))}
      </ul>
    </section>
  );
};


export default Main;
